
  <style type="text/css">
   
   .textbox
	{
	  width:200px;
	}
	select
	{
	 width:200px;
	}
	label
	{
		margin-top:10px;
	}
	.fill
	{
		margin-top:10px;
	}
	.title
	{
	  background-color:#CCCCCC;
	  text-align:left;
	  width:700px;
	  height:20px;
	  padding:2px;
	  margin-top:10px;
	  
	}
	.divleft
	{
	 margin-left:250px;
	 margin-top:-40px;
	}
	div #transactioninfo,div #propertyinfo,div #purchaseinfo
	{
	 margin-top:10px;
	}
	div #refinanceinfo,div #closinginfo
	{
		display:none;
	}
  </style>
  <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
 
<form id="form1" name="form1" method="post" action="action/index.php">
  <div style="width:700px;">
 Purchase/sales transactions in DC are subject to transfer and recordation taxes. Generally, refinance transactions are not subject to any tax. However, DC does charge recording fees for all transactions.
 </div>
     <input type="hidden" name ="state" value="dc"/>
  <div id="transactioninfo">
   
    <div class="title">Transaction Info</div>
    <div >
	 <label>Transaction Type:</label><br />
	 <select name="transaction_type" class="cbtransaction">
	   <option value="Purchase">Purchase</option>
	   <option value="Refinance" >Refinance</option>
	 </select>
	</div>
 </div>
  <div id="propertyinfo">
    <div class="title">Property Info</div>
    <div>
	 
	 <div>
	   <label>Primary Residence:</label><br />
	   <input type="radio" name="primary_residence" value="1"/> Yes
	   <input type="radio" name="primary_residence" value="0" checked="checked"/> No
	 </div>
    </div>
  </div>
  <div id="purchaseinfo">
		<div class="title">Purchase Info</div>
		<div class="fill">
		   <label>Purchase Price:</label><br />
		   <input class="textbox" type="text" name="purchase_price" id="purchaseprice" /> 
		 </div>
		 <div>
		    <label>1st Loan Amount:</label><br />
		    <input class="textbox" type="text" name="loan_amount1" id="loan_amount1" /> 
		 </div>
		 <div class="divleft">
		    <label>2nd Loan Amount:</label><br />
		    <input class="textbox" type="text" name="loan_amount2" id="loan_amount2" /> 
		 </div>
		  <div class="fill">
		    <label>Enhanced coverage:</label><br />
		    <input type="radio" name="enhanced_coverage" value="1" checked="checked"/> Yes
	        <input type="radio" name="enhanced_coverage" value="0" /> No
		 </div>
		
		  <div class="divleft">
		     <label>Who pays:</label><br />
		   <select name="payer" >
                          <option value="Default">Default</option>
                          <option value="Seller" >Seller Pays</option>
                          <option value="Buyer">Buyer Pays</option>
                          <option value="Split50" >Split 50-50</option>
                      </select>
		 </div>

   </div>
   <!---->
    <div id="refinanceinfo">
		<div class="title">Refinance Info</div>
		
		 <div class="fill">
		    <label>1st New Loan Amount:</label><br />
		    <input class="textbox" type="text" name="loan_amount3" id="loan_amount3" /> 
		 </div>
		 <div class="divleft">
		    <label>2nd New Loan Amount (if applicable):</label><br />
		    <input class="textbox" type="text" name="loan_amount4" id="loan_amount4" /> 
		 </div>
		 
		 <div >		   
		    <input id="chkowner" type="checkbox" name="chkowner" value="Existing owner's policy" />Existing owner's policy
                     <div  id="policy" style="display:none">
                            <label>Amount of owner's policy</label>
                            <input type="text" style="width:80px;" name="amount_policy" />
                      </div>
		 </div>
		 
   </div>
   <!---->
   <div id="closinginfo">
  
    <div class="title">Closing Info</div>
    <div class="fill">
	 <label>Closing location:</label><br />
	 <select name="mobile_closing">
	   <option value="0">Household Title & Escrow Office</option>
	   <option value="1" >Mobile Closing</option>
	 </select>
	</div>
 </div>
<div id="buttoninfo">
   <button id="btpre"> PreviousPage </button>
      <input type="submit" value="Calculate Good Faith Estimate" name="btcalculator" id="btcalculator" />
   <button id="btnext"> NextPage</button>
 </div>
  

</form>

  <script type="text/javascript">
     jQuery(document).ready(function()
	 {				
				
				
			 jQuery(".cbtransaction").change(function () {
				 
              if ( $('.cbtransaction option:selected').text()=='Refinance')
              {
				  $("#purchaseinfo").css('display','none');
				  $("#refinanceinfo").css('display','block');
				  $("#closinginfo").css('display','block');
              } 
			  else
			  {
				  $("#purchaseinfo").css('display','block');
				  $("#refinanceinfo").css('display','none');
				  $("#closinginfo").css('display','none');
			  }
			 }).change();

            
	});

   </script>